<template>
	<!-- 	<view class="container">
		<view class="line-wrap">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				xml:space="preserve" class="circle-load-rect-svg" width="600" height="200" viewbox="0 0 600 400">
				<polyline points="5 5, 575 5, 575 200, 5 200" fill="none" class="g-rect-path" />
				<polyline points="5 5, 575 5, 575 200, 5 200" fill="none" stroke-dasharray="5, 5" class="g-rect-fill" />
			</svg>
		</view>
	</view> -->

	<view class="container">
		<svg height="100%" width="100%"> xmlns="http://www.w3.org/2000/svg">
			<!-- <polyline points="240 10 140 10 140 90 0 90" stroke="black" fill="transparent" stroke-width="5" /> -->
			<polyline points="240 10 140 10 140 90 0 90" stroke="#ddd" fill="transparent" stroke-width="2" />
			<polyline points="240 10 140 10 140 90 0 90" stroke="#ddd" class="g-dashed-line" fill="transparent"
				stroke-width="2" />
		</svg>

		<view style="position: relative;">
			<view class="div" style="position: relative;">

			</view>
			<view style="position: absolute;top: 0;left: 0;z-index: 99;">
				111111111233333333卧槽牛逼
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	body {
		font-size: 10px;
	}

	.container {
		width: 100%;
	}

	.line-wrap {
		width: 300px;
		margin: 0 auto;
	}

	.circle-load-rect-svg {
		margin: 10px;
	}

	.g-rect-path {
		fill: none;
		stroke-width: 10;
		stroke: #d3dce6;
		stroke-linejoin: round;
		stroke-linecap: round;
		filter: drop-shadow();
	}

	.g-rect-fill {
		fill: none;
		stroke-width: 10;
		stroke: #ff7700;
		stroke-linejoin: round;
		stroke-linecap: round;
		/* stroke-dasharray: 0, 1370; */
		stroke-dashoffset: 0;
		stroke-dasharray: 5, 5;
		animation: lineMove 2s ease-out infinite;
	}

	/* 	@keyframes lineMove {
		stroke-dashoffset: 1000;
		stroke-dasharray: 80 160;
	} */

	.g-dashed-line {
		stroke: #5500ff;
		stroke-dasharray: 40, 40;
		stroke-dashoffset: 0;
		animation: move 2.4s infinite linear;
	}

	@keyframes move {
		0% {
			stroke-dashoffset: 0;
		}

		100% {
			stroke-dashoffset: -320;
		}
	}

	.div {
		position: relative;
		width: 300px;
		height: 240px;
		background: #ddd;
		overflow: hidden;
		mask:
			linear-gradient(#000, #000 3px, transparent 3px, transparent calc(100% - 3px), #000 calc(100% - 3px), #000),
			linear-gradient(90deg, #000, #000 3px, transparent 3px, transparent, transparent calc(100% - 3px), #000 calc(100% - 3px), #000);

		&::before {
			content: '';
			position: absolute;
			left: -50%;
			top: -50%;
			width: 200%;
			height: 200%;
			background: conic-gradient(#fc0, #ff5722 25%, transparent 25%, transparent);
			animation: rotate 4s linear infinite;
		}
	}

	@keyframes rotate {
		100% {
			transform: rotate(1turn);
		}
	}
</style>